<template>
  <div class="home">
    <div class="header">
      <div class="addr" @click="popShow = true">
        <i class="ali-icon-font"></i>
        <span v-text="city"></span>
      </div>
      <van-popup v-model="popShow" position="bottom" :style="{ height: '45%' }">
        <van-area @confirm="getAddr" @cancel="popShow = false" title="请选择城市" :area-list="areaList" value="110000"
          :columns-num="2" />
      </van-popup>
      <van-search @click="onSearch" disabled :left-icon="require('@/assets/img/home/search.png')" v-model="searchValue"
        placeholder="请输入产品名称、品牌、型号、SKU号" />
      <div v-if="!hasUser" class="login" @click="goLogin">登录</div>
    </div>
    <div class="content">
      <div class="nav">
        <van-tabs v-model="navactive">
          <van-tab title="首页"></van-tab>
          <van-tab title="行业优选" to="sum"></van-tab>
          <van-tab title="防疫专区" to="area"></van-tab>
        </van-tabs>
      </div>
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in swiper" :key="item.bannerId">
            <img :src="item.bannerImg">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="advertise">
        <div class="top">
          <img src="@/assets/img/home/advertise-1.webp">
        </div>
        <div class="bottom">
          <img src="@/assets/img/home/advertise-2.webp">
          <img src="@/assets/img/home/advertise-3.webp">
        </div>
      </div>
      <div class="recommand">
        <van-tabs v-model="recactive" @change="onchange">
          <van-tab :title="item.name" v-for="item in categoryList" :key="item.id">
            <div class="special" v-if="recactive == 0">
              <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-row>
                  <van-col span="12" v-for="(item1, index1) in list" :key="index1">
                    <router-link
                      :to="{ name: 'detail', params: { id: item1.skuNo,name: item1.name, img: item1.imageUrl, price: item1.sellingPrice } }">
                      <div class="img"><img :src="item1.imageUrl"></div>
                      <p>{{ item1.name }}</p>
                      <h3 v-if="item1.sellingPrice >= 0">￥{{ item1.sellingPrice }}</h3>
                      <h3 v-else>待询价</h3>
                    </router-link>
                  </van-col>
                </van-row>
              </van-list>
            </div>
            <div class="normal" v-else>
              <div class="goods">
                <div class="good" v-for="item1 in list.list" :key="item1.name">
                  <div class="title">
                    <i class="ali-icon-font"></i>
                    {{ item1.name }}
                  </div>
                  <div class="wrap">
                    <van-row>
                      <van-col class="good-item" span="12" v-for="item2 in item1.products" :key="item2.goodsName">
                        <router-link
                          :to="{ name: 'detail', params: { id: item2.goodsSku, name: item2.goodsName, img: item2.goodsThumb, price: item2.goodsPrice } }">
                          <div class="img"><img :src="item2.goodsThumb"></div>
                          <p>{{ item2.goodsName }}</p>
                          <h3>￥{{ item2.goodsPrice }}</h3>
                        </router-link>
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </div>
              <div class="brand">
                <div class="title">
                  <i></i>
                  推荐品牌
                </div>
                <div class="brand-item" v-for="brand in list.brands" :key="brand.brandId">
                  <img :src="brand.brandImageUrl">
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';

export default {
  name: 'HomeView',
  data() {
    return {
      searchValue: '',
      hasUser: localStorage.getItem("userInfo") || false,
      popShow: false,
      areaList,
      city: '上海市',
      navactive: 0,
      swiper: [],
      recactive: 0,
      categoryList: [],
      list: [],
      loading: false,
      finished: false,
      pageNo: 0
    }
  },
  created() {
    this.$api.getHome().then(res => {
      this.swiper = res.data[1].content
      this.categoryList = res.data[6].content;
    })
  },
  methods: {
    getAddr(val) {
      this.popShow = false;
      this.city = val[1].name
    },
    onLoad() {
      if (this.recactive == 0) {
        this.$apiProxy({
          url: `/specialFloorSku/${this.categoryList[this.recactive].id}?page=${this.pageNo}&size=10`,
          method: "get"
        }).then(res => {
          this.pageNo++;
          this.list = this.list.concat(res.data.content);
          // console.log(this.list);
          this.loading = false;
          if (res.data.last) {
            this.finished = true
          }
          if (this.list.length >= 100) {
            this.finished = true
          }
        });
      }
    },
    onchange() {
      this.pageNo = 0;
      if (this.recactive == 0) {
        this.$apiProxy({
          url: `/specialFloorSku/${this.categoryList[this.recactive].id}?page=${this.pageNo}&size=10`,
          method: "get"
        }).then(res1 => {
          console.log(res1);
          this.pageNo++;
          this.list = res1.data.content;
          // console.log(this.list);
        })
      }
      else {
        this.$api.getTabs(this.recactive - 1).then(res => {
          // console.log(res);
          this.list = res;
        })
      }
    },
    onSearch() {
      this.$router.push({ name: 'search' })
    },
    goLogin() {
      this.$router.push({ name: "login" })
    }
  },
}
</script>

<style lang="less">
.home {
  .header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #fff;
    padding: 5.5px 12px;

    .addr {
      width: 77.5px;
      color: #333;
      font-size: 12px;

      i {
        font-size: 15px;
        margin-right: 5.5px;
        color: #cb2b2b;
      }

      span {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 50px;
        display: inline-block;
        overflow: hidden;
      }
    }

    .van-search {
      padding: 0;
      flex: 1;
      height: 33px;
      border-radius: 5px;
      overflow: hidden;
      white-space: nowrap;

      .van-search__content {
        padding-left: 0px;
        background: #f2f2f2;

        .van-cell {
          padding: 0px;
          display: flex;
          align-items: center;

          .van-field__left-icon {
            margin-right: 0px;

            .van-icon {
              width: 33px;
              height: 33px;
              vertical-align: middle;

              .van-icon__image {
                width: 100%;
                height: 100%;
              }
            }
          }

          .van-cell__value {
            .van-field__body {

              .van-field__control:disabled {
                color: #999;
                font-size: 12px;
                cursor: not-allowed;
                opacity: 1;
                -webkit-text-fill-color: #999;
              }

              input::placeholder {
                color: #999;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .login {
      width: 38px;
      font-size: 13px;
      text-align: right;
      color: #666;
    }

    .van-popup {
      .van-picker {
        .van-picker__toolbar {

          .van-picker__cancel,
          .van-picker__confirm {
            width: 60px;
            color: #f0250f;
            letter-spacing: 6px;
            padding: 0px;
          }

          .van-picker__title {
            -webkit-box-flex: 1;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .van-picker__columns {
          .van-picker-column {
            .van-picker-column__item--selected {
              width: 100%;
              height: 34px;
              border-top: 1px solid #dadada;
              border-bottom: 1px solid #dadada;
              z-index: 3;
            }
          }
        }
      }
    }
  }

  .content {
    margin-top: 44px;
    background-color: #f9f9f9;

    .nav {
      display: flex;
      line-height: 21px;
      background: #fff;
      padding: 12px 12px 9.5px;

      .van-tabs {
        .van-tabs__wrap {
          height: 25px;

          .van-tabs__nav {
            .van-tabs__line {
              display: none;
            }

            .van-tab {
              width: auto;
              white-space: nowrap;
              color: #333;
              font-size: 15px;
              margin-right: 10px;
            }

            .van-tab--active {
              padding: 0px 7px;
              line-height: 21px;
              height: 21px;
              color: #fff;
              background: #f74747;
              border-radius: 10px;
              text-align: center;
            }
          }
        }
      }
    }

    .swiper {
      padding: 12px 11px 0px;

      .van-swipe {
        border-radius: 8px;
        overflow: hidden;

        .van-swipe__track {
          .van-swipe-item {
            img {
              border-radius: 8px;
              height: 100%;
            }
          }
        }

        .van-swipe__indicators {
          bottom: 17px;

          .van-swipe__indicator {
            opacity: 1;
            border-radius: 100%;
            border: 1px solid #eaeaea;
            background: transparent;
            margin: 0 4px;
            width: 8px;
            height: 8px;
            display: inline-block;
          }

          .van-swipe__indicator--active {
            opacity: 1;
            border: none;
            background-color: #fb4848 !important;
          }
        }
      }
    }

    .advertise {
      padding-top: 12px;

      .top {
        padding: 0 12px;
        height: 67px;

        img {
          border-radius: 5px;
          height: 100%;
        }
      }

      .bottom {
        padding: 12px 12px 0px;
        display: flex;
        justify-content: space-between;

        img {
          width: 170px;
          border-radius: 5px;
          height: 100%;
        }
      }
    }

    .recommand {
      padding-top: 12px;
      margin-bottom: 50px;

      .van-tabs {
        margin-top: 4px;
        padding-top: 12px;
        background-color: #fff;

        .van-tabs__wrap {
          padding-top: 7px;
          margin-bottom: 15px;
          font-size: 14px;
          color: #333;
          font-weight: 500;
          padding-right: 9.5px;

          .van-tabs__nav {
            .van-tab {
              padding: 0px 14px;
              height: 30px;
            }

            .van-tab--active {
              color: #e52b2b;
            }

            .van-tabs__line {
              border-radius: 10px;
              bottom: 18.5px;
            }
          }
        }

        .van-tabs__content {
          background-color: #f9f9f9;

          .special {
            .van-list {
              .van-row {
                .van-col {
                  padding: 0px 12px 10px;
                  background-color: white;

                  .img {
                    height: 115px;
                    padding: 0 28px;
                  }

                  p {
                    text-align: left;
                    margin-top: 6px;
                    height: 35px;
                    font-size: 12px;
                    color: #666;
                    font-weight: 500;
                    line-height: 17.5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }

                  h3 {
                    text-align: left;
                    margin-top: 6.5px;
                    font-weight: 400;
                    line-height: 15px;
                    font-size: 13px;
                    color: #f74747;
                  }
                }
              }
            }
          }

          .normal {
            .goods {
              background-color: white;

              .good {
                padding-bottom: 10px;

                .title {
                  margin-top: 1.5px;
                  text-align: center;
                  font-size: 13px;
                  color: #333;
                  margin-bottom: 17.5px;
                  font-weight: 500;

                  i {
                    font-size: 15px;
                    color: #fb4848;
                    margin-right: 7.5px
                  }
                }

                .wrap {
                  .van-row {
                    .van-col {
                      padding: 0px 12px 10px;

                      .img {
                        height: 115px;
                        padding: 0 28px;
                      }

                      p {
                        text-align: left;
                        margin-top: 6px;
                        height: 35px;
                        font-size: 12px;
                        color: #666;
                        font-weight: 500;
                        line-height: 17.5px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                      }

                      h3 {
                        text-align: left;
                        margin-top: 6.5px;
                        font-weight: 400;
                        line-height: 15px;
                        font-size: 13px;
                        color: #f74747;
                      }
                    }
                  }
                }
              }
            }

            .brand {
              margin-top: 5px;
              background-color: white;
              padding-top: 13px;
              display: flex;
              flex-wrap: wrap;

              .title {
                width: 85px;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333;
                background-image: url(@/assets/img/home/rmd-bg.png);
                background-position: 50%;
                background-size: 100%;
                margin-right: 9.5px;
                margin-bottom: 7.5px;

                i {
                  display: inline-block;
                  width: 14px;
                  height: 15px;
                  background-image: url(@/assets/img/home/recommand.png);
                  background-position: 50%;
                  background-size: 100%;
                  margin: 0 5.5px;
                  vertical-align: text-bottom;
                }
              }

              .brand-item {
                width: 81.5px;
                height: 35px;
                margin-right: 9.5px;
                margin-bottom: 7.5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>